<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选项卡</title>
</head>
<body>
	<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.js"></script>
	<div class="maintab">
		<ul class="tabtitle">
			<li class="tabhover">
				<a href="#">选择标题1</a>
			</li>
			<li class="taba">
				<a href="#">选择标题2</a>
			</li>
			<li class="taba">
				<a href="#">选择标题3</a>
			</li>
		</ul>
		<div class="tabcontent">选择内容1</div>
		<div class="tabcontent" style="DISPLAY: none">选择内容2</div>
		<div class="tabcontent" style="DISPLAY: none">选择内容3</div>
	</div>

	<script type=text/javascript>
		$(document).ready(function () {
				$('.tabtitle li').click(function () {
					var index = $(this).index();
					$(this).attr('class',"tabhover").siblings('li').attr('class','taba');
					$('.tabcontent').eq(index).show(200).siblings('.tabcontent').hide();
				});
		})
	</script>

</body>
</html>